<template>
  <div class="max">
    <div class="shaixuan">
      <span class="el-icon-zoom-in chaxun">添加路线</span>
    </div>
    <div class="shaixuan1">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="路线名称：">
          <el-input v-model="formInline.user" placeholder="路线名称"></el-input>
        </el-form-item>
        <el-form-item label="负责人员：">
          <el-select v-model="formInline.region" placeholder="负责人员">
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <span class="chaxun">地图</span>
      <img class="images"
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdimg04.c-ctrip.com%2Fimages%2F100l15000000xni0m4C5D_R_1024_10000_Q90.jpg%3Fproc%3Dautoorient&refer=http%3A%2F%2Fdimg04.c-ctrip.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658283722&t=7c04c5f00a5a7b2135ce62fcc7b541d3"
        alt="未加载" />
    </div>
    <div class="footer-table">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="date" label="序号" width="180"> </el-table-column>
        <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
        <el-table-column prop="name" label="销售额" width="180">
        </el-table-column>
        <el-table-column prop="address" label="配送额"> </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage4" :page-sizes="[5, 10, 15, 20]" :page-size="5"
          layout="total, sizes, prev, pager, next, jumper" :total="20">
        </el-pagination>
      </div>
    </div>
    <el-button @click="save">提交</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      currentPage4: 5,
      formInline: {
        user: "",
        region: "",
      },
    };
  },
  created() {
    let info = this.$route.query.info
    console.log(info)
    this.formInline.user = info.routeName;
    this.formInline.region = info.brandName
  },
  activated() {
    let info = this.$route.query.info
    console.log(info)
    this.formInline.user = info.routeName;
    this.formInline.region = info.brandName
  },
  methods: {
    save() {
      console.log(this.formInline)
      this.$router.push({ path: "/Xingwei-1/Xingwei-1-1" })
    },
    handleEdit(index, row) {
      console.log(index, row);
      alert("123");
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.splice(index, 1);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.max-hard {
  width: 100%;
  height: 50px;
  background-color: rgba(243, 243, 243);
  line-height: 50px;

  h4 {
    // padding-left: 80px;
    float: left;
    color: #666;
  }

  .btn {
    float: right;
    margin-top: 5px;
    // margin-right: 100px;
  }
}

.shaixuan {
  // margin-right: 100px;
  // margin-left: 80px;
  margin-top: 20px;
  height: 60px;
  line-height: 60px;
  background-color: rgba(243, 243, 243);
  border: 1px solid #999;

  span {
    display: inline-block;
  }

  .chaxun {
    margin-left: 20px;
  }

  .btn-one {
    float: right;
    height: 40px;
    margin-top: 10px;
    margin-right: 20px;
  }

  .btn-two {
    float: right;
    height: 40px;
    margin-top: 10px;
  }
}

.shaixuan1 {
  // margin-right: 100px;
  // margin-left: 80px;
  height: 60px;
  background-color: white;
  border: 1px solid #999;

  .demo-form-inline {
    padding-top: 10px;
    margin-left: 20px;
  }
}

.table-1 {
  // margin-left:80px;
  // margin-right:100px;
  margin-top: 20px;
  border: 1px solid #999;
}

.block {
  margin-left: 630px;
}

.shuaixuan-bt {
  // height: 60px;
  // margin-left: 80px;
  //  margin-right: 100px;
  // line-height: 60px;
  margin-top: 40px;
  background-color: #fff;
  border: 1px solid #999;

  .shai {
    margin-left: 20px;
    padding: 10px;
  }
}

.images {
  width: 100%;
  height: 600px;
}
</style>
